Plaza @ UF 


Presented by: David DePatie ddepatie@ufl.edu 
Navigate to Plaza.ufl.edu 


& Dd @ pleza.ufledu 


Welcome to plaza.ufl.edu 


MyPlaza folder 


“* Somewhere on your local computer create a folder called: MyPlaza 


FTP client 


\7 


“+ As the name suggests, FTP is used to transfer files between computers on a network. You can use FTP to 
exchange files between computer accounts, transfer files between an account and a desktop computer, or 
access online software archives. This is the simplest way to update webpages. 


Navigate to FileZilla-project.org 
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FileZilla... 


Overview 
FileZilla Welcome to the homepage of PleZila, the free FTP solution. Both a chent and a server are avaliable 
Features 
Screenshots Support &s avaiable through our forums, the wid and the bug and feature request trackers. 
Documentation 1” addition, you wil find documentation on how to comple FileZilla and nightly bulds for multiple pl 


FileZilla Server © Quick download links 
Cownload 


COMMRMRAY, Download 3 Download gg 
Project pape FileZilla Client FileZilla Server 


Pick the chent you want to transfer Mes. Get the server ¢ you want to make fies avaiable 
hans @ News © 


FileZilla - Logon 
** HOST - plaza.ufl.edu 
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“* Username - Your Gator-link & Password 
“* CLICK — Quickconnect button 


— Edit View Transfer Server Bookmarks Help 

la IEA) Ss Pe vl aR a 
Host: plaza.ufl.edu Username: ddepatie Password: | Port: [ Quickconnect {| 
[TT s—?A—W'QO0I0 a 


Page 1 


Frame areas: 


iteal F Filese ten: 


Sipaesat oe 

+ pg Rahs SO 
Ppagprm pegrrepryert 
Server/Local file 


| Quewed files “Faled torsfers | Suxcessfidtansfes 


In the background: 


FTP Commands 
FTP Replies 
Data 


Connection 


FTP Client FTP Server 
on Client PC 


http://www.deskshare.com/resources/articles/images/ftp-protocol.gif 
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Web Editing 


1. Adobe Dreamweaver 
Hy 


MY FAVORITE 
CHOICE 


2. Adobe Creative Suite Design 
Premium 


3. Microsoft Expression Studio 
Web Pro 


4. Microsoft Expression Studio 
Ultimate 


7. Web Designer 


Xara 


5. 5sI0 Fusion 


Screen shot by J Kyrnin 


8. Contribute 


6. CoffeeCup HTML Editor 


™ 


+ 


Nene) 


9. Namo WebEditor 


WebEditor 8 


LINKS from: http: 


webdesign.about.com/od/windowshtmleditors/tp/windows-web-editing-suites.htm 
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Launch Microsoft WORD [We will use a free option for today Microsoft Word (do not tell anyone you do web 


design this way) we are cheating for this lesson. ] Type in the following: 


Hi Welcome to YOUR NAME’s Web Page 
lam a(n) CURRENT TITLE at the University of Florida 


You may contact me at YOUR _EMAIL@ufl.edu 
My office is located in YOUR CLASSROOM / ROOM NUMBER 


To give the page a little style: we will make the top line a heading 1 


HTML NOTE: A web page needs to see <h1> heading 1 tag to know that it is a heading with size 1. There are many tags 
in an HTML file and that is where many get lost in web design. 


Select the top sentence and then CLICK HOME TAB / click HEADING 1 


CTRL +S = save / save document 


Find your MyPlaza folder 


Then name the file index 


Then scroll the save as type to Web Page (*.htm, * html) 


Filename: index.html 


CLICK SAVE button 


Just a little feedback why we use a REAL editor: it is to reduce Page WEIGHT — characters and lines of code. Using 
Microsoft Word we get... 
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</head> 


<body lang=EN-US link=blue vlink=purple style='tab-interval: .Sin'> 


kaiv class=WordSectioni> 


In oO Bw 


<hi>Hi Welcome to David <span class=SpellE>DePatie’ s</span> Web Page</hi> 


[2p ND HDHD HYD HD HY HY oO oOo ow 


ow oO 


<p class=MsoNormal>I am an instructional Designer at the University of Florida</p> 


<p class=MsoNormal>You may contact me at <a href="mailto:ddepatieG@ufl.edu">ddepatieG@ufl.edu</a></p> 


<p class=MsoNormal>My office is located in McCarty 1197</p> 


Ow WNP 


<p class=MsoNormal>Office number: 352.294-7641</p> 
<p class=MsoNormal><o:p>&nbsp;</o:p></p> 

</div> 

</body> 


</html> 


If on the other hand we use Dreamweaver we get... 


DREAMWEAVER OPTION: [15 lines of code] 


@ <!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1i/D1 
2 <html xmins="http://www.w3.org/1999/xhtml1"> 
3 <head> 
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
§ <title>Untitled Document</title> 
6 </head> 
vi 
8 <body> 
9 <hil style="color: #06F">Hi Welcome to David DePatie's Web Page</hi> 
i0=Ss <ul> 
ae <1i> I am an instructional Designer at the University of Florida 
a <li> You may contact me at <a href="mailto:ddepatie@ufl.edu">ddepatie@ufl.edu</a><br /> 
13 <1i> My office is located in McCarty 1197<br /> 
i4 °#@2~<1i> Office number: 352.294-7641</p</body> 
iS </html> 
16 


It is so heavy that there is a special tool in Dreamweaver: 


Dreamweaver tool: [Clean up Word HTML] 
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Now we need to upload our page to the plaza server. 


Go back to FileZilla 


You should see your new file on the left (in the local computer) 


Tecate [Fees vaereeviret : . 
}) mobile a i 
)) MyPlaza 
mY) Networking > 

4 = ™ r 

Filename : Filesize Filetype Last modified Filename 

@) index.html 41,897 Firefox HTML... 1/27/2014 2:46:57 ... (© index.html 


To upload a file to the web server Double Click index.html. 


You should now see the file on the right pane uploaded to (Remote Server) 


So, to see your new page you will need to go to: 


Navigate to Plaza. ufl. edu/YourGatorLink 


Plaza.ufl.edu/ddepatie — mine 


Have fun creating pages... 
One place to learn this process for REAL is Lynda.com 


Here is a link to the training site: 


Training UF offers to Student and Faculty 


https://shib.lynda.com/Shibboleth.sso/InCommon?providerld=https://login.ufl.edu/idp/shibboleth&target=https: 


//shib.lynda.com/InCommon 


Page 6 


